<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	xmlns:th="http://www.thymeleaf.org"
	layout:decorator="/layout/main">
<head>
<title>Home :: Meeting History</title>
<link rel="stylesheet" type="text/css"
	th:href="@{/bundles/flowplayer.css}" />
</head>
<body>
	<div layout:fragment="content">
		<div class="container">
			<div class="add-button">
				<a class="btn btn-primary" th:href="@{/add}">ADD NEW MEETING</a>
			</div>
		</div>
		
		<div class="data-grid-item" th:if="${#lists.isEmpty(meetings)}">
			<div id="add-new-meeting" class="inner-data-grid-item">
				<p class="lead">THERE IS NO MEETING</p>

			</div>
		</div>
		
		<div class="data-grid-item" th:if="${not #lists.isEmpty(meetings)}">
			<div id="add-new-meeting" class="inner-data-grid-item" th:each="meeting : ${meetings}">
						<p class="lead">MEETING #<span th:text="${meeting.meetingID }"></span></p>
						<div class="row">
							<div class="span6" style="margin-bottom: 10px;">
								<div class="flowplayer">
									<video>
										<source type="video/mp4" src="http://cuongtruc.tk/sample/demo1.WEBM"></source>
									</video>
								</div>
							</div>
							<div class="span5">
								<p class="lead">Meeting Type:</p>
								<p th:text="${meeting.typeOfMeeting }"></p>
								<p class="lead">Meeting Location:</p>
								<p th:text="${meeting.location }"></p>
								<p class="lead">Description / Note:</p>
								<p th:inline="text">
									[[${meeting.description }]]
								</p>
							</div>
						</div>
					</div>
		</div>
	</div>
	<div layout:fragment="footer">
		<script type="text/javascript" th:src="@{/bundles/flowplayer.js}"></script>
	</div>
	
</body>
</html>